<template>
  <div>
    <div v-if="dataListShow === 1" class="product-list-wrapper">
      <el-row :gutter="20" v-if="products.length>0">
        <el-col :span="6" v-for="(product, index) in products" :key="index">
          <el-card class="product-card">
            <img @click="ProductDetails(product)" :src="product.thumb" alt="" class="product-image">

            <div class="product-info">
              <div class="price-location">
                <span class="price">FOB <span class="priceIcon"> ¥</span><span class="produtName">{{ product.price }}</span>
                </span>
                <span class="location"><span><img class="weizhiIcon"
                      src="../../../static/engineering5188/homPage/orientation.png" alt="" />
                  </span> {{ product.shop?product.shop.reg_address:'' }}</span>
                <!-- <span v-if="product.discount" class="discount-tag">{{ product.discount }}%</span> -->
              </div>
              <p class="product-name">{{ product.title }}</p>
              <div class="seller-info">
                <span class="seller-type">

                  <img src="../../../static/engineering5188/homPage/strength.png" v-if="product.shop && product.shop.if_strength" />

                </span>
                <span class="seller-name">{{ product.shop?product.shop.company_title:'' }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div v-else class="noDataClass">暂无数据</div>
    </div>





    <!-- 推荐商家 -->
    <div class="shangjiaoTjDiv" v-if="dataListShow === 2">
      <div class="shangjiaoTj" v-for="item in shopList" :key="item.id">
        <!-- 顶部信息区域 -->
        <header class="header">
          <div class="header-left">
            <img class="company-logo" :src="item.image" alt="">
          </div>
          <div class="header-right">
            <div class="company-title">
              <span class="company-name">{{ item.company_title }}</span>
              <span class="tag">

                <img src="../../../static/engineering5188/homPage/strength.png" v-if="item.if_strength" />

              </span>
              <span class="zhty">
                综合体验：
              </span>
              <span class="rating">
                <van-rate v-model="item.star" color="#ffd21e" disabled-color="#ffd21e" disabled />
              </span>
            </div>
            <div class="company-address">
              <span><img class="weizhiIcon" src="../../../static/engineering5188/homPage/orientation.png" alt="" />
                <span class="gongsiWz">公司地址：
                  <span style="color: #222222;">{{ item.reg_address }}</span>
                </span>
              </span>
              <button class="map-button" @click="openMap(item.reg_address )">查看地图</button>
            </div>

            <div class="xianDiv">

            </div>

            <div class="company-intro">
              <p>{{ item.desc }}</p>
            </div>
            <!-- 功能按钮区域 -->
            <div class="button-area">
              <button class="primary-button" @click="dialPhone">
                <img src="../../../static/engineering5188/homPage/ShopTelephone.png" />
                一键拨号
              </button>
              <button class="success-button" @click="openChat">
                <img src="../../../static/engineering5188/homPage/message.png" />
                在线咨询
              </button>
              <button class="info-button" @click="goToStore(item)">
                <img src="../../../static/engineering5188/homPage/shop.png" />
                进入店铺
              </button>
            </div>
          </div>
        </header>

        <!-- 商品展示区域 -->
        <div class="product-area">


          <div class="img-item">
            <img src="../../../static/engineering5188/homPage/Recommended.png" />
          </div>


          <div class="lbtWidth">

            <div class="product-item" v-for="(product, index) in item.pros" :key="index">
              <img :src="product.thumb" alt="">
              <div class="product-name-overlay">{{ product.title }}</div>
            </div>

            <div class="jiantou">
              <i class="el-icon-arrow-right"/>
            </div>

          </div>
        </div>


      </div>
    </div>










    <div class="pageClass">
      <div class="pageClass-first" @click="LoadFistData">首页</div>
      <div class="pageClass-Last" @click="LoadLastData">上一页</div>
      <template v-if="totalPage < 6">
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 1 }" @click="loadPageData(1)"
          v-if="totalPage >= 1">1</div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 2 }" @click="loadPageData(2)"
          v-if="totalPage >= 2">2</div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 3 }" @click="loadPageData(3)"
          v-if="totalPage >= 3">3</div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 4 }" @click="loadPageData(4)"
          v-if="totalPage >= 4">4</div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 5 }" @click="loadPageData(5)"
          v-if="totalPage >= 5">5</div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 6 }" @click="loadPageData(6)"
          v-if="totalPage >= 6">6</div>
      </template>
      <template v-else>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 1 }" @click="loadPageData(1)">1
        </div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 2 }" @click="loadPageData(2)">2
        </div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 3 }" @click="loadPageData(3)">3
        </div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 4 }" @click="loadPageData(4)">4
        </div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 5 }" @click="loadPageData(5)">5
        </div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == 6 }" @click="loadPageData(6)">6
        </div>


        <div class="pageShenLue">...</div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == totalPage - 1 }"
          @click="loadPageData(totalPage - 1)">{{ totalPage - 1 }}</div>
        <div :class="{ 'pageClass-num': true, 'active': currentPage == totalPage }" @click="loadPageData(totalPage)">{{
          totalPage }}</div>
      </template>
      <div class="pageClass-Last" @click="LoadNextData">下一页</div>
      <div class="pageClass-first" @click="LoadEndData">末页</div>
    </div>




  </div>
</template>

<script>

import companyInfoList from '../goodsAndServices/components/companyInfoList.vue';
import {openBaiduMap} from "../../../util/map"

export default {
  name: "ShipData",
  components: {
    companyInfoList
  },

  data() {
    return {
      dataListShow: 1,
      totalPage: 20,
      rating: 4.5,
      products: [
      ],
      currentPage: 1,
      pageSize: 16,
      total: 1, // 假设总数据量为230条，可根据实际情况修改
      pageRange: 5,// 控制显示的页码数量范围
      queryObj: {},
      shopList: [],
    };
  },
  created() {
    this.getProductList();
  },
  methods: {
    openMap(reg_address){
      openBaiduMap(reg_address);
    },
    updateData(query){
      this.queryObj = query;
      this.getProductList();
    },
    setData(num) {
      this.dataListShow = num;
      // this.queryObj = query;
      this.currentPage = 1;
      this.getProductList();
    },
    getProductList() {
      if (this.dataListShow === 1) {
        this.$httpApi("/api/proIndexList", {
          ...this.queryObj,
          page: this.currentPage,
          limit: this.pageSize,
          keyword: this.$route.query.keyword ? this.$route.query.keyword:undefined,
        }, 'get').then(res => {
          this.products = res.data.list;
          this.totalPage = Math.ceil(res.data.count / this.pageSize);
          this.$emit('updateCount', res.data.count)
          if(this.totalPage == 0){
            this.totalPage = 1;
          }
        })
      } else {
        this.$httpApi('/api/shopProList', {
          ...this.queryObj,
          page: this.currentPage,
          limit: this.pageSize
        }, 'get').then(res => {
          this.shopList = res.data.list;
          this.totalPage = Math.ceil(res.data.count / this.pageSize);
          this.$emit('updateCount', res.data.count)
          if(this.totalPage == 0){
            this.totalPage = 1;
          }
        })
      }

    },
    LoadEndData() {
      this.currentPage = this.totalPage;
      this.getProductList();
    },
    LoadNextData() {
      if (this.currentPage < this.totalPage) {
        this.currentPage++;
        this.getProductList();
      }
    },
    LoadFistData() {
      this.currentPage = 1;
      this.getProductList();
    },

    LoadLastData() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.getProductList();
      }
    },

    loadPageData(val) {
      this.currentPage = val;
      this.getProductList();
    },
    ProductDetails(item) {
      console.log('111111')
      this.$router.push({
        path:"/ProductDetails",
        query:{
          id:item.id
        }
      })
    },

    dialPhone() {
      console.log('执行一键拨号');
      // 实际可使用window.location.href = 'tel:电话号码'
    },
    openChat() {
      console.log('打开在线咨询窗口');
      // 实际可使用弹窗组件或跳转页面
    },
    goToStore(item) {
      console.log('进入店铺页面');
      // 实际可使用Vue Router跳转
      this.$router.push({
        path:'/homePage',
        query:{
         shop_id:item.id
        }
      })
    },


  }
};
</script>

<style lang="less" scoped>
.noDataClass{
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
}
::v-deep .el-card__body {
  padding-left: 0px;
  padding-right: 0px;
}

.xianDiv {
  width: 1011px;
  height: 0px;
  border: 1px dashed #D7D9E0;
  margin: 12px 0;
  opacity: 0.6;
}

.jiantou {
  width: 32px;
  height: 76px;
  background: #000000;
  border-radius: 8px 0px 0px 8px;
  opacity: 0.4;
  color: #FFFFFF;
  position: absolute;
  right: 25px;
  top: 60px;
  display: flex;
  align-items: center;
  justify-content: center;

  i{
    font-size:20px
  }
}

.img-item {
  width: 130px;
  height: 210px;
}

.img-item img {
  width: 130px;
  height: 210px;
}

.gongsiWz {
  padding-left: 5px;
  padding-right: 16px;
}

.zhty {

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #6D6D6D;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-left: 20px;
}

.produtName {

  font-family: DIN Alternate, DIN Alternate;
  font-weight: bold;
  font-size: 24px;
  color: #ED232A;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.priceIcon {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #ED232A;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.shangjiaoTj {
  width: 1530px;
  margin: auto;
  background-color: #fff;
  border: 1px solid #EEEEEE;
  margin-top: 20px;
}
.shangjiaoTjDiv .shangjiaoTj:first-child {
  background-color:  #F2F5F9;;
}

.pageClass {
  display: flex;
  margin-top: 26px;
  justify-content: center;
  padding-bottom: 26px;

  .pageClass-first {
    width: 40px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #EEEEEE;
    font-weight: normal;
    font-size: 14px;
    color: #7A7A7A;
    line-height: 32px;
    text-align: center;
    margin-right: 16px;
    cursor: pointer;
  }

  .pageClass-Last {
    width: 69px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #EEEEEE;
    font-weight: normal;
    font-size: 14px;
    color: #7A7A7A;
    line-height: 32px;
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
  }

  .pageClass-num {
    width: 32px;
    height: 32px;
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #EEEEEE;
    font-weight: normal;
    font-size: 14px;
    color: #7A7A7A;
    line-height: 32px;
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
  }

  .pageShenLue {
    font-weight: normal;
    font-size: 14px;
    color: #7A7A7A;
    margin-right: 10px;
  }

  .active {
    background: #014BC4;
    color: #FFF;
  }
}

/* 顶部区域样式 */
.header {

  display: flex;
  padding: 24px;

}

.header-left {}

.company-logo {
  width: 310px;
}

.header-right {
  padding-left: 31px;
  margin-top: 5px;
}

.company-title {
  display: flex;
  align-items: center;
}

.company-name {
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 18px;
  color: #000000;
  text-align: left;
  font-style: normal;
  text-transform: none;

}

.tag {
  margin-left: 10px;

}

.tag img {
  width: 78px;
  height: 20px;
}

.rating {
  margin-left: 10px;
}

.company-address span {
  font-size: 14px;
  font-weight: 400;
}

.company-address {
  margin-top: 16px;
}

.map-button {
  background: none;
  border: none;
  color: #409eff;
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
}

.company-intro {
  width: 1011px;
  margin-top: 12px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 28px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

/* 功能按钮区域样式 */
.button-area {
  // display: flex;
  // justify-content: center;
  margin-top: 30px;
}

.primary-button {
  width: 130px;
  height: 40px;
  background: #014BC4;
  border-radius: 4px 4px 4px 4px;
  cursor: pointer;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  font-style: normal;
  text-transform: none;
}

.primary-button img {
  width: 18px;
  height: 18px;
}

.success-button img {
  width: 18px;
  height: 18px;
}

.success-button {
  width: 130px;
  height: 40px;
  background: #FFFFFF;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #014BC4;

  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #014BC4;
  font-style: normal;
  text-transform: none;
  cursor: pointer;
  margin-left: 16px;
}

.info-button img {
  width: 18px;
  height: 18px;
}

.info-button {
  width: 130px;
  height: 40px;
  background: #FFFFFF;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #014BC4;

  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #014BC4;
  font-style: normal;
  text-transform: none;
  cursor: pointer;
  margin-left: 16px;
}

/* 商品展示区域样式 */
.product-area {
  display: flex;
  padding: 0 24px 24px 24px;

  border-radius: 8px 8px 8px 8px;
}

.lbtWidth {
  width: 1370px;
  background: #FFFFFF;
  display: flex;
  padding: 24px 0 24px 8px;
  position: relative;
}

.product-item {
  // width: 222px;
  // height: 162px;
  // background-color: #666;
  margin-right: 20px;
  position: relative;
}

.product-item img {
  width: 248px;
  height: 162px;
}

.product-name-overlay {
  width: 100%;
  height: 36px;
  background: #000000;
  border-radius: 0px 0px 0px 0px;
  opacity: 0.5;
  position: absolute;
  bottom: 0;
  line-height: 36px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  text-align: center;
  font-style: normal;
  text-transform: none;
}






.product-list-wrapper {
  width: 1530px;
  margin: auto;
}

.product-card {
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}

.product-image {
  width: 100%;
  height: 240px;
  display: block;
}

.product-info {
  padding: 15px 15px 0 15px;
}

.price-location {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.price {

  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 14px;
  color: #333333;

  text-align: left;
  font-style: normal;
  text-transform: none;
}

.location {
  color: #666;
  font-size: 14px;
}

.discount-tag {
  background-color: red;
  color: white;
  padding: 2px 6px;
  border-radius: 2px;
}

.product-name {
  margin-bottom: 10px;

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  width: 297px;
  height: 22px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: #000000;

  text-align: left;
  font-style: normal;
  text-transform: none;

}

.seller-info {
  display: flex;
  align-items: center;
  margin-top: 26px;

  padding-top: 10px;
  border-top: 1px solid #F9F9F9;
}

.weizhiIcon {
  width: 12px;
  height: 16px;
}

.seller-type {
  // background-color: #67c23a;
  // color: white;
  // padding: 2px 6px;
  // border-radius: 2px;
  margin-right: 5px;
}

.seller-type img {
  width: 78px;
  height: 20px;
}

.seller-name {

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #716F6B;

  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>